<template>
  <!-- 主体部分 -->
  <section class="main">
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      @change="AllChangeBtn"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
      <li :class="{ completed: item.flag }" v-for="item in list" :key="item.id">
        <div class="view">
          <input
            class="toggle"
            type="checkbox"
            v-model="item.flag"
            @change="listFlag(item.id)"
          />
          <label @dblclick="editList(item.id)" v-if="item.isShow">{{
            item.uname
          }}</label>
          <input
            type="text"
            :value="item.uname"
            v-else
            @blur="changeData(item.id, item.uname, $event)"
            ref="ListInp"
            @keyup.enter="keyboard"
          />
          <button class="destroy" @click="delList(item.id, item.flag)"></button>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
  },

  methods: {
    // 改变状态事件
    listFlag(id) {
      this.$emit('listFlag', id)
    },
    // 删除事件
    delList(id, flag) {
      // 查看要删除的事件是否完成
      flag ? this.$emit('delList', id) : alert('事件未完成')
    },
    AllChangeBtn() {
      this.$emit('AllChangeBtn')
    },
    editList(id) {
      this.$emit('editList', id)
      this.$nextTick(() => {
        console.log(this.$refs.ListInp)
        this.$refs.ListInp[0].focus()
      })
    },
    changeData(id, uname, e) {
      // 判断是否为空
      if (e.target.value.trim() === '') {
        alert('内容不能为空')
        this.$refs.ListInp[0].focus()
        e.target.value = uname
      } else {
        this.$emit('changeData', id, e.target.value.trim())
      }
    },
    keyboard() {
      this.$refs.ListInp[0].blur()
    },
  },
}
</script>

<style></style>
